$bg:#fff;
$ppr:750px/15/1rem;
@mixin trancen() {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@mixin tranl() {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@mixin trant() {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

body {
    background: #f1f1f1;
    width: 100%;
    .wrap {
        width: 100%;
        height: 100%;
        max-width: 750px;
        margin: 0 auto;
        background: $bg url(../assert/image/wrap_bg.jpeg) no-repeat center;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        .ic_audio {
            width: 30px;
            height: 30px;
            display: block;
            background: url(../assert/image/audio.png) no-repeat center;
            background-size: 30px 30px;
            position: absolute;
            top: 20px;
            right: 20px;
            &.not {
                background: url(../assert/image/audio_not.png) no-repeat center !important;
                background-size: 30px 30px !important;
            }
        }
        .step {
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .step1 {
            width: 100%;
            text-align: center;
            @include trant;
            p {
                font-size: 56px/$ppr;
                color: #a19db3;
                text-align: center;
                margin-bottom: 40px/$ppr;
                text-shadow: 1px 1px 3px #a19db3;
            }
            input {
                width: 80%;
                height: 100px/$ppr;
                line-height: 100px/$ppr;
                border: none;
                border-bottom: 1px solid #fff;
                background: transparent;
                font-size: 40px/$ppr;
                color: #fff;
                padding: 5px/$ppr 10px/$ppr;
                letter-spacing: 2px;
                text-align: center;
            }
            span.subm {
                display: block;
                margin: 40px/$ppr auto 0;
                width: 200px/$ppr;
                height: 80px/$ppr;
                background: #b2a5e8;
                border-radius: 20px/$ppr;
                text-align: center;
                line-height: 80px/$ppr;
                color: #fff;
                font-size: 32px/$ppr;
                border: 4px/$ppr solid rgba(148, 76, 247, 0.61);
                letter-spacing: 6px/$ppr;
            }
        }
        .step2 {
            width: 80%;
            height: 300px/$ppr;
            border: 2px solid #a98cf3;
            border-radius: 20px/$ppr;
            background: rgba(59, 15, 109, 0.41);
            margin: 300px auto 0;
            box-shadow: 0px 0px 20px 5px #180744;
            text-align: center;
            a {
                display: block;
                width: 80%;
                height: 100px/$ppr;
                text-align: center;
                line-height: 100px/$ppr;
                border: 1px solid #d281ba;
                font-size: 32px/$ppr;
                border-radius: 50px/$ppr;
                margin: 35px/$ppr auto;
                background: linear-gradient(top, #ce9ffc, #7367f0);
                color: #fff;
            }
        }
        .joinroom{
            position: absolute;
            top:40%;
            margin: 0 auto;
            width:100%;
            text-align: center;
            p.tle{
                color: #a19db3;
                text-align: center;
                margin-bottom: 40px/$ppr;
                text-shadow: 1px 1px 3px #a19db3;
                font-size: 42px/$ppr;
            }
            p.tips{
                color: #fff;
                margin-top: 5px;
            }
            input{
                width: 80%;
                height: 100px/$ppr;
                line-height: 100px/$ppr;
                border: none;
                border-bottom: 1px solid #fff;
                background: transparent;
                font-size: 40px/$ppr;
                color: #fff;
                padding: 5px/$ppr 10px/$ppr;
                letter-spacing: 2px;
                text-align: center;
            }
            span.subm {
                display: block;
                margin: 40px/$ppr auto 0;
                width: 200px/$ppr;
                height: 80px/$ppr;
                background: #b2a5e8;
                border-radius: 20px/$ppr;
                text-align: center;
                line-height: 80px/$ppr;
                color: #fff;
                font-size: 32px/$ppr;
                border: 4px/$ppr solid rgba(148, 76, 247, 0.61);
                letter-spacing: 6px/$ppr;
            }
        }
        .step3 {
            position: absolute;
            width:100%;
            height: 100%;
            top:0;
            left:0;
            background: #f1f1f1;
            header {
                width: 100%;
                height: 80px/$ppr;
                line-height: 80px/$ppr;
                background: #77c3ec;
                text-align: center;
                position: fixed;
                top: 0;
                left: 0;
                color: #fff;
                font-size: 32px/$ppr;
                .back {
                    display: block;
                    width: 40px/$ppr;
                    height: 40px/$ppr;
                    background: url(../assert/image/back.png) no-repeat;
                    background-size: cover;
                    position: absolute;
                    left: 20px/$ppr;
                    @include trant;
                }
            }
            .users {
                width: 95%;
                border-radius: 10px/$ppr;
                background: #fff;
                margin: 100px/$ppr auto 30px/$ppr;
                padding: 30px/$ppr 0;
                p {
                    line-height: 50px/$ppr;
                    padding-left: 20px/$ppr;
                    color: #333;
                    font-size: 30px/$ppr;
                }
                ul {
                    width: 100%;
                    padding: 0 20px/$ppr;
                    margin-top: 20px/$ppr;
                    &:after {
                        content: '';
                        display: block;
                        clear: both;
                    }
                    li {
                        font-size: 28px/$ppr;
                        color: #7367F0;
                        float: left;
                        margin-right: 30px/$ppr;
                        padding: 2px 4px;
                        &.cur{
                            border:2px dashed #4300ff;
                        }
                    }
                }
            }
            .setopts{
                width:95%;
                margin: 20px/$ppr auto;
                background: #fff;
                border-radius: 10px/$ppr;
                padding:20px/$ppr;
                box-sizing: border-box;
                p{
                    font-size: 32px/$ppr;
                    color: #333;
                    text-align: left;
                    padding-left: 8px/$ppr;
                    box-sizing: border-box;
                    margin-bottom: 20px/$ppr;
                    i{
                        font-style: normal;
                        font-size: 26px/$ppr;
                        color: #999;
                    }
                }
                ul{
                    li{
                        width:100%;
                        height: 60px/$ppr;
                        line-height: 60px/$ppr;
                        font-size: 32px/$ppr;
                        color: #333;
                        margin-bottom: 20px/$ppr;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        label{
                            width:20%;
                            color: #666;
                        }
                        input{
                            width:75%;
                            height: 100%;;
                            border:1px solid #999;
                            border-radius: 6px/$ppr;
                            padding-left: 10px/$ppr;
                            box-sizing: border-box;
                            &:focus{
                                box-shadow: 0 0 15px 2px #e88dd5;
                            }
                        }
                    }
                }
                .btnarea{
                     margin: 50px/$ppr auto 20px/$ppr;
                     display: flex;
                     justify-content: center;
                     .btnadd{
                         margin-right: 10px/$ppr;
                     }
                    .btnadd,.btndone{
                        width:200px/$ppr;
                        height: 80px/$ppr;
                        line-height: 80px/$ppr;
                        text-align: center;
                        display: block;
                        background: #2E8DED;
                        color: #fff;
                        border:1px solid #4476A7;
                        border-radius: 20px/$ppr;
                        font-size: 34px/$ppr;
                    }
                }
                
            }
            .loading{
                width:95%;
                height: 400px/$ppr;
                margin: 20px/$ppr auto;
                background: #fff;
                border-radius: 10px/$ppr;
                padding: 10px/$ppr;
                box-sizing: border-box;
                background: #fff url(../assert/image/load.gif) center no-repeat;
                background-size:100% 150%;
                p{
                    width:100%;
                    font-size: 36px/$ppr;
                    color: #333;
                }
                
            }
            .zhuanpan{
                width:600px/$ppr;
                height: 600px/$ppr;
                margin: 40px/$ppr auto;
                background: #fff;
                border-radius: 50%;
                border:30px/$ppr solid #2D93CA;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;
                .needle{
                    position: absolute;
                    top:50%;
                    left:50%;
                    width:150px/$ppr;
                    height: 150px/$ppr;
                    background: #e296d8;
                    border-radius: 50%;
                    margin-top:-75px/$ppr;
                    margin-left:-75px/$ppr;
//                  transform-origin: center center;
                    color: #fff;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 32px/$ppr;
                    z-index: 3;
                    em{
                        position: absolute;
                        top:-186px/$ppr; 
                        left:50%;
                        width:0;
                        height: 0;
                        border-style: solid;
                        border-width:100px/$ppr 20px/$ppr;
                        border-color: transparent transparent #e296d8; 
                        transform: translateX(-50%);
                    }
                }
                .an_rt{
                    animation: keeprotate .2s linear infinite;
                }
                .txt{
                    width:100%;
                    height: 100%;
                    position: absolute;
                    top:50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    z-index: 2;
                    p{
                        text-align: right;
                        position: absolute;
                        top:50%;
                        left:50%;
                        transform-origin: left center;
                        font-size: 34px/$ppr;
                        color: #333;
                        width:48%;
                        height: 40px/$ppr;
                        line-height: 40px/$ppr;
                        margin-top:-20px/$ppr;
                    }
                }
                .ctx{
//                  width:100%;
//                  height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 1;
                }
            }
            .alert{
                position: absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                margin: auto;
                width:80%;
                height: 200px/$ppr;
                background: #ff5722;
                border-radius: 10px/$ppr;
                z-index: 9;
                padding: 20px;
                text-align: center;
                p{
                    text-align: center;
                    font-size: 32px/$ppr;
                    color: #fff;
                    width:100%;
                    height: 80px/$ppr;
                    margin-bottom: 30px/$ppr;
                }
                button{
                    padding: 8px/$ppr 15px/$ppr;
                    border:1px solid #aac7d6;
                    background: #b9abde;
                    border-radius: 10px/$ppr;
                    width:160px/$ppr;
                    height: 80px/$ppr;
                    line-height: 80px/$ppr;
                    text-align: center;
                    color: #fff;
                }
            }
        }
    }
}

@keyframes keeprotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
